<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="main">
			<p>段落1</p>
			<p class="p2">段落2</p>
			<p>段落3</p>
			<p>段落4</p>
			<ul class="ul">
				<li id="li1">No.1</li>
				<li class="li2">No.2</li>
				<li>No.3</li>
				<p>段落5</p>
				<p name="name">段落6</p>
				<p name="uname">段落7</p>
				<p name="names">段落8</p>
				<p name="nnmms">段落9</p>
				<p name="namp">段落10</p>
			</ul>
			<a name="aaa" href="#">超链接1</a>
			<li>No.4</li>
			<ul class="ul2">
				<li>壹</li>
				<li>贰</li>
				<li>叁</li>
				<li>肆</li>
				<li>伍</li>
				<li>陆</li>
				<li>柒</li>
			</ul>
			<h1>标题1</h1>
			<h2>标题2</h2>
			<h6>标题6</h6>
			用户名：<input type="text" name="username" />
			
		</div>
		
		<script type="text/javascript">
			$(function(){
				//--------基本选择器-----------
				//id选择器
				$("#li1").css("color","red");
				//class选择器
				$(".li2").css("color","blue");
				//标签选择器
				$("li").css("background","pink");
				//并集选择器
				$("#li1,.li2").css("background","aqua");
				//全局选择器
				$("*").css("font-size","20px");
				
				//--------层次选择器-----------
				//1.后代选择器（main下面的所有的p的字体颜色变成棕色）
				$("#main p").css("color","brown");
				//2.子选择器main下面的子元素P的宽度是200px
				$("#main>p").css({"width":"200px","background":"red"});
				//3.相邻元素的选择器（No.3的背景色改成黄色）
				$(".li2+li").css("background","yellow");
				//4.同辈选择器（段落2后面的所有p标签的字体颜色改成黄色）
				$(".p2~p").css("color","yellow");
				
				//--------属性选择器-----------
				//1.p中的name属性的值以u开头的字体颜色是红色
				$("p[name^='u']").css("color","red");
				//2.p中的name属性的值以p结尾的的字体颜色变成绿色
				$("p[name$='p']").css("color","green");
				//3.p中的name属性的值包含s的字体颜色变成紫色
				$("p[name*='s']").css("color","purple");
				//4.选择所有包含name属性的文本颜色改成蓝色
				$("[name]").css("color","blue");
				//5.name的值必须是name的背景色为orange
				$("[name='name']").css("background","orange");
				//6.name的值不等于name的背景颜色变成黄绿色
				$("p[name!='name']").css("font-size","15px");
				
				//--------基本过滤选择器-----------
				//1.将第一个li设置背景色为红色
				$(".ul2 :first").css("background","red");
				//2.将最后一个Li设置背景色为绿色
				$(".ul2 :last").css("background","green");
				//3.偶数行的背景色变成粉红色
				$(".ul2 :even").css("background","orange");
				//4.设置单数行的背景颜色为黑色
				$(".ul2 :odd").css("background","black");
				//5.设置叁的背景色为绿色
				$(".ul2 :eq(2)").css("background","green");
				//6.设置叁以后的所有的背景色为
				$(".ul2 :gt(2)").css("background","aqua");
				//7.设置叁以前的所有背景色
				$(".ul2 :lt(2)").css("background","red");
				
				//8.设置所有的标题元素的背景色为黄色
				$(":header").css("background","yellow");
				//9.选取当前获取焦点的元素的背景色为red
				$("input").focus();  //聚焦
				$(":focus").css("color","red");
				
				//--------可见性过滤选择器-----------
				//1.将所有的p隐藏掉
				$("p:visible").hide(1000);
				//2.将所有隐藏的p显示出来
				$("p:visible").show(1000);
				
				//将ul2隐藏掉
				$(".ul2").css("display","none");
				
				
			});
		</script>
	</body>
</html>
